<template>
  <div class="detailBox">
    <van-cell-group>
      <van-cell v-for="val in detailInfo" :key="val.title" :title="val.title">
        <template>
          <van-rate
            v-if="val.title == '描述相符评分'"
            v-model="val.value"
            readonly
          />
          <p v-else v-html="showHTML(val.value)"></p>
        </template>
      </van-cell>
      <div v-for="v in fileList" :key="v.title" class="fileBox">
        <div v-if="v.value && v.value.length">
          <p class="van-cell-p">{{ v.title }}</p>
          <div class="file-list">
            <uploadCom :readOnly="true" :defaultFiles="v.value"></uploadCom>
          </div>
        </div>
        <van-cell v-else :title="v.title" value="暂无" />
      </div>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailInfo: [],
      fileList: [],
    };
  },
  methods: {
    // 获取详情数据
    getData(arr = []) {
      this.detailInfo = arr;
    },
    // 获取附件数据
    getFileData(arr = []) {
      this.fileList = arr;
    },
    // 文字内容换行转换
    showHTML(text) {
      return text
        ? text.toString().replace(new RegExp("\r\n|\n", "g"), "<br />")
        : "";
    },
  },
};
</script>

<style scoped lang="less">
.fileBox {
  .van-cell-p {
    padding: 10px 16px;
    box-sizing: border-box;
  }
  .file-list {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}
.detailBox .van-cell__value {
  text-align: left;
  color: #323233;
}
.detailBox /deep/.van-cell__title {
  flex: inherit;
  width: 90px;
  margin-right: 12px;
  color: #969799;
}
</style>
